<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>complexspiral</title>
</head>
<body>
<div id="content">
<h1>complexspiral</h1>
<p>
Remember: as you look this demo over, there is <em>no</em> Javascript here, nor are <em>any</em> PNGs being used, nor do I employ <em>any</em> proprietary extensions to CSS or any other language.  It's all done using straight W3C-recommended markup and styling, all validated, plus a total of three (3) images.  Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 are likely to get this right.  According to my tests, that's Mozilla 0.8 and later (which also means Netscape 6.x) and Internet Explorer 5.x for the Macintosh.
</p>
<h3>Hands-on: Things to Examine</h3>
<p>
Before you start, make sure you're viewing this page in one of the browsers mentioned above.  Otherwise the descriptions to follow won't match what you see.
</p>
<p>
The first, easiest thing to do is scroll the page vertically.  Notice how the hyperlinks on the left side of the page slide over the background seamlessly, as does the main content area (this blue-backed box right here).  The visual effect should be that the hyperlinks and the main content area have translucent backgrounds, but opaque foregrounds.  They don't, in fact, but that's what it should look like.
</p>
<p>
Try changing the text size and notice how the compositing effect remains consistent.  Then make your browser window really narrow and scroll horizontally.  Again, everything should remain seamless and consistent.  Scroll the page so it's not at its default, change the size of the text, and hover again.  The "compositing" is still seamless as ever.
</p>
<p>
No, I'm not using one or more semi-transparent PNGs for the link and content backgrounds, nor am I employing a half-screen GIF trick.  The entire page is driven by one HTML document containing an embedded stylesheet and no Javascript, one external CSS file, and four JPG images.
</p>

<h3>What the Sam Scratch is goin' on here?!?</h3>
<p>
Glad you asked.  The effect demonstrated here is achieved by using fixed background images, nothing more.  For example, the main-content area (the blue part here) uses the following styles for the default spiral-shell background:
</p>
<pre>
div#content {background: #468 url(shell-blue.jpg) 0 0 
  no-repeat fixed;}
</pre>
<p>
The above is equivalent to these styles:
</p>
<pre>
div#content { 
   background-color: #468;
   background-image: url(shell-blue.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }
</pre>
<p>
The effect of these longer rules is exactly the same; they're just split out into individual background properties for more detailed consideration by you, gentle reader.
</p>
<p>
First, check out the blue-shell image found here: <a href="shell-blue.jpg">url(shell-blue.jpg)</a>.  Then come back to this page and I'll continue with the explanation.  All done?  Great.
</p>
<p>
According to CSS, any background image that is "fixed" using <code>background-attachment: fixed;</code> is fixed with respect to the <strong>viewport</strong>-- <em>not</em> the element with which the image is associated.  So I set the blue-shell background image to be aligned with the top left corner of the browser window (the viewport) with the values given for <code>background-position</code>.  However, the image will only be visible wherever is intersects with the element to which it's been assigned.  Therefore, even though the top left corner of the blue-shell image is aligned with the top left corner of the viewport, we can only see it wherever it intersects with a <code>div</code> that has an <code>id</code> with a value of <code>content</code> (which, again, happens to be the one containing this text).
</p>
<p>
So I set a fixed background for the <code>BODY</code>, the content <code>DIV</code>, and the hyperlinks in both their normal and hovered states.  (I also turned the hyperlinks into block-level elements, thus avoiding the need for tables or other cumbersome markup tricks.)  In any given case of an element's display, we see whatever part of the associated background image intersects with the element.  The rest of the background image remains hidden.
</p>
<p>
And <em>that's</em> how it works.
</p>

<h3>I'm not seeing any seamless compositing!</h3>
<p>
Then I'm willing to bet that you're using Internet Explorer for Windows (any version), or possibly Opera (any version).  Neither of these browsers properly support <code>background-attachment: fixed</code> for elements other then the <code>body</code>.  And yes, this page uses a strict DOCTYPE, so IE6 is in "<a href="http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp">strict mode</a>."  I guess when <a href="http://www.microsoft.com/windows/ie/evaluation/features/default.asp#section5">Microsoft claims 100% CSS1 compliance</a>, they're referring to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the <a href="http://www.w3.org/TR/REC-CSS1">CSS1 specification</a>.  It tends to make me wonder how limited their "full support" is for other key open specifications, like HTML and DOM.
</p>
<p>
If you want to see this page in all its glory, you need one of the following browsers:
</p>
<ul>
<li><a href="http://home.netscape.com/browsers/6/">Netscape 6.x</a></li>
<li><a href="http://www.mozilla.org/releases/">Mozilla</a> (anything after 0.8 should work fine)</li>
<li><a href="http://www.microsoft.com/mac/download/ie/ie50.asp">Internet Explorer 5 for Macintosh</a></li>
</ul>
<p>
Those are all good browsers to have around anyway, since they have excellent standards support.
</p>
<h3>The pros and cons</h3>
<p>
Right off the bat, there's the fact that I've demonstrated something here that no sliced-image tool can provide for you.  The compositing effects that <code>background-attachment: fixed</code> makes possible are without equal in the WYSIWYG world.  Furthermore, if you look in the source you'll see that my left-side hyperlinks are all text, which would make rearranging or rewriting them a snap.  It also lets them adapt to the user's display preferences with a minimum of fuss.
</p>
<p>
While I used pixel widths to position my elements here, I could have used ems or any other measure.  I just used pixels because I felt like it.  I also used positioned elements instead of a table just for kicks, but I could have used a table just as easily.  The result would have been the same, at least in CSS1-conformant browsers.  The key here is the incredible flexibility of layout you can have, and lining up the backgrounds isn't necessary because the browser does it for you.  No more re-slicing your images, or having to edit cumbersome graphic files!
</p>
<p>
In addition, creating new styles for the visited and active states of the hyperlinks requires nothing more than two new background images and a couple of lines of CSS.  That's it!  With a sufficently optimized (or small) background image, you could get each effect while only adding a few kilobytes to your page weight, which might seem like a lot but almost certainly will be less than the overhead incurred with multiple sliced images and the HTTP requests needed to load them in a traditional sliced-image site-- and again I say it: in such sites, you can't have the seamless compositing effect shown here.
</p>
<p>
The drawback, of course, is (as ever) flawed browsers.  It would be possible to set things up to avoid any major problems, and if you've looked at this page in Explorer for Windows, then you know what you're up against.  Perhaps someone could come up with a way to use the techniques shown here in a way that won't look horrible in flawed browsers.  Maybe it will be <strong>you</strong>-- if so, please <a href="mailto:eric@meyerweb.com">e-mail me</a> to let me know what you've done!
</p>

<h3>Image credits</h3>
<ul>
<li>Nautilus shell: scanned by and copyright Eric A. Meyer</li>
</ul>

<h4>Jump to</h4>
<p>
<a href="http://www.meyerweb.com/eric/css/edge/index.html">css/edge home</a>
</p>
</div>

<div id="links">
<a href="http://www.meyerweb.com/">meyerweb</a>
<a href="http://www.meyerweb.com/eric/css/edge/">css/edge</a>
<a href="http://www.ericmeyeroncss.com/">On CSS</a>
<a href="http://www.newriders.com/">New Riders</a>
<a href="http://www.w3.org/TR/REC-CSS2">CSS2 Spec</a>
<a href="http://www.favelets.com/">Favelets</a>
<a href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a>
<a href="http://style.cleverchimp.com/">Agitprop</a>
</div>

</body>
</html>
